<template>
	<!-- <view v-if="loaded" class="container"> -->
	<view v-if="loaded" :id="templateId" class="container">
		<!-- 商品列表 -->
		<view class="slide">
			<view
				class="slide__goods"
				v-for="(item, index) in batchList"
				:key="index"
			>
				<!-- 商品 begin -->
				<view
					class="carrier"
					:class="[
						theIndex == index
							? 'open'
							: oldIndex == index
							? 'close'
							: ''
					]"
				>
					<!-- checkbox begin -->
					<view class="checkbox-box" @tap="selectedCart(item)">
						<view
							class="checkbox"
							:class="{ checked: item.checked }"
						>
							<!-- 主题色 -->
							<uni-icon
								size="40rpx"
								:color="
									(item.checked &&
										themeStyles.lightMainColor) ||
										'#999999'
								"
								:name="item.checked ? 'hook-full' : 'hook'"
							>
							</uni-icon>
						</view>
					</view>
					<!-- checkbox end -->
					<uni-goods-col
						:goods="item"
						:goodsPrice="item.priceStr.split('.')"
						:goodsTypeText="item.skuName"
						:priceColor="themeStyles.lightMainColor"
					>
						<!-- 购买按钮 begin -->

						<!-- 主题色 -->
						<template slot="metaRight">
							<view
								@tap.stop="stopBubble()"
								class="df df-r number"
							>
								<view
									class="df df-r sub"
									@tap.stop="subBuyNum(index)"
									>-</view
								>
								<view class="df df-c input-box">
									<input
										disabled
										class="tac input"
										type="number"
										v-model="item.refundsNumber"
										@blur="ranDomBuyNum(index)"
									/>
								</view>
								<view
									class="df df-r add"
									@tap.stop="addBuyNum(index)"
									>+</view
								>
							</view>
						</template>
						<!-- 购买按钮 end -->
					</uni-goods-col>
				</view>
				<!-- 商品 end-->
			</view>
		</view>

		<!-- 脚部菜单 -->
		<view
			v-if="batchList.length"
			class="footer"
			:style="{ bottom: footerbottom }"
		>
			<view class="checkbox-box" @tap="allSelectGoods">
				<view class="checkbox" :class="{ checked: isAllselected }">
					<!-- 主题色 -->
					<uni-icon
						size="40rpx"
						:color="
							(isAllselected && themeStyles.mainColor) ||
								'#999999'
						"
						:name="isAllselected ? 'hook-full' : 'hook'"
					>
					</uni-icon>
				</view>
				<view class="text">全选</view>
			</view>
			<view class="settlement">
				<view
					:style="themeStyles.btnFullColor"
					class="btn"
					@tap="toConfirmation()"
					>确定</view
				>
			</view>
		</view>
	</view>
</template>

<script>
import {
	updateCart,
	deleteBatchCart,
	queryPriceTotal
} from "@/lib/api/interestedServer/cart";

import { queryAbleRefundsList } from "@/lib/api/refundsServer/goods";

import { baseFileUri } from "@/utils/request/baseConfig";

/** components begin */
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import uniIcon from "@/components/uniIcon/uniIcon";
/** components end */

/** mixins beagin */

/** mixins end */

import { mapState, mapMutations } from "vuex";

/** localData begin */
let goodsCurrentPage = 1;

/** localData end */
export default {
	components: {
		uniGoodsCol,
		uniIcon
	},
	data() {
		return {
			baseFileUri,
			currentGoodsIndex: null,
			sumPrice: "0",
			sumPriceDecimal: "00",
			headerPosition: "fixed",
			headerTop: null,
			statusTop: null,
			showHeader: true,
			selectedList: [],
			isAllselected: false,
			priceTotal: null,
			batchList: [],
			//控制滑动效果
			theIndex: null,
			oldIndex: null,
			isStop: false
		};
	},
	onLoad(option) {
		this.getBatchList(option.orderId || "");
	},

	computed: {
		...mapState("afterSale", ["applicationRefundsData"])
	},

	methods: {
		...mapMutations("afterSale", ["saveApplicationRefundsData"]),
		// 查询可退商品
		async getBatchList(orderId) {
			const propsData = {
				orderId
			};

			try {
				const res = await queryAbleRefundsList(propsData);
				// 默认退款数量
				res.data.list.length &&
					res.data.list.forEach((item, index) => {
						res.data.list[index].refundsNumber = item.refundableNum;
					});

				this.batchList = res.data.list;
				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "出错了* _ *");
				wx.navigateBack();
			}
		},

		//跳转退款类型页面
		toConfirmation() {
			//   if (cartIdList.length < 1) {
			if (this.selectedList.length < 1) {
				uni.showToast({
					title: "请选择退款商品",
					icon: "none"
				});
				return;
			}
			const applicationRefundsData = {
				list: this.selectedList
			};
			//   this.applicationRefundsData.list = this.selectedList;
			this.saveApplicationRefundsData(applicationRefundsData);
			uni.navigateTo({
				url: `/pages/user/pages/afterSale/refundsDetail`
			});
		},

		// 选中商品
		selectedCart(goods) {
			const selectedList = this.selectedList;
			goods.checked = !goods.checked;
			let currentIndex = -1;

			selectedList.forEach((item, index) => {
				if (item.orderGoodsId === goods.orderGoodsId) {
					currentIndex = index;
				}
			});
			currentIndex > -1
				? selectedList.splice(currentIndex, 1)
				: selectedList.push({
						orderGoodsId: goods.orderGoodsId,
						refundsNumber: goods.refundsNumber
				  });
			this.isAllselected = selectedList.length == this.batchList.length;
		},

		//全选
		allSelectGoods() {
			const arr = [];

			for (const goods of this.batchList) {
				goods.checked = this.isAllselected ? false : true;
				arr.push({
					orderGoodsId: goods.orderGoodsId,
					refundsNumber: goods.refundsNumber
				});
			}
			this.selectedList = this.isAllselected ? [] : arr;
			this.isAllselected =
				this.isAllselected || this.batchList.length == 0 ? false : true;
		},

		/** 修改数量区域 begin */

		// 减少数量
		async subBuyNum(index) {
			const goods = this.batchList[index];
			if (goods.refundsNumber <= 1) {
				goods.refundsNumber = 1;
				this.$api.showToast("不能再少了 * _ *");
				return;
			}
			goods.refundsNumber--;
		},

		// 增加数量
		async addBuyNum(index) {
			const goods = this.batchList[index];
			console.log("goods", goods);
			if (goods.refundsNumber >= goods.refundableNum) {
				goods.refundsNumber = goods.refundableNum;
				this.$api.showToast("已是最大退款数量 * _ *");
				return;
			}

			goods.refundsNumber++;
		},

		// 改变购买数量
		async ranDomBuyNum(index) {
			// setTimeout是为了防止input值不改变（详见uniapp）
			const goods = this.batchList[index];

			// 最大购买数量
			if (goods.refundsNumber > goods.stock) {
				setTimeout(() => {
					goods.refundsNumber = goods.stock;
				}, 0);
			}

			// 最小购买数量
			if (goods.refundsNumber < 1) {
				setTimeout(() => {
					cart.number = 1;
				}, 0);
			}
		}
		/** 修改数量区域 end */
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-bottom: 120rpx;
}

.checkbox-box {
	display: flex;
	align-items: center;
	.checkbox.lapse {
		font-size: 40rpx;
		width: 40rpx;
	}
	.checkbox {
		z-index: 8;
		font-size: 40rpx;
		line-height: 1;
		// padding: 4rpx;
		// background: #ffffff;
		border-radius: 50%;
	}

	.text {
		color: $theme-color-base;
		margin-left: 16rpx;
		font-size: 28rpx;
	}
}

.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: #fff;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}

.header {
	width: 92%;
	padding: 0 4%;
	height: 100rpx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #fff;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);

	/*  #endif  */
	.title {
		font-size: 36rpx;
	}
}

.place {
	background-color: #ffffff;
	height: 100rpx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}

.slide {
	width: 100%;
	padding: 20rpx 0 120rpx 0;

	.tis {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	&__goods {
		background-color: $theme-panel-bg-color;
		padding: 56rpx 24rpx;
		border-radius: 16rpx;
		height: 288rpx;
		margin: 24rpx;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		border: 0;

		.carrier {
			//   border-bottom: 2rpx solid #e6e6e6;

			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}

				100% {
					transform: translateX(-152rpx);
				}
			}

			@keyframes closeMenu {
				0% {
					transform: translateX(-152rpx);
				}

				100% {
					transform: translateX(0);
				}
			}

			&.open {
				animation: showMenu 0.25s linear both;
			}

			&.close {
				animation: closeMenu 0.15s linear both;
			}

			background-color: #fff;

			.checkbox-box {
				flex-shrink: 0;
				height: 22vw;
			}

			position: absolute;
			width: 100%;
			padding: 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;

			/deep/ .uni-goods-col .goods-info {
				width: 386rpx;
			}

			.number {
				// width: 150rpx;
				height: 50rpx;

				.input-box {
					overflow: hidden;
					border-radius: 2rpx;
					width: 68rpx;
					height: 48rpx;
					margin: 0 4rpx;

					background-color: #f5f5f5;

					input {
						font-weight: 500;
						color: $theme-color-main-base;
						background: #f3f3f3;
						font-size: 32rpx;
						width: 68rpx;
						height: 48rpx;
					}
				}

				.sub,
				.add {
					font-size: 40rpx;
					border-radius: 2rpx;
					width: 68rpx;
					height: 48rpx;
					color: #6e6e6e;
					background-color: #f5f6f7;
				}
			}
		}
	}
}

.footer {
	width: 100%;
	padding: 0 4%;
	background-color: #fbfbfb;
	height: 98rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0rpx;
	z-index: 5;
	box-shadow: 0 -2rpx 0 0 rgba(204, 204, 204, 0.5);

	.text {
		color: #666;
		font-size: 24rpx;
	}

	.delete-btn {
		font-size: 24rpx;
		border: 2rpx solid;
		width: 148rpx;
		height: 62rpx;
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.settlement {
		width: 60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.sum {
			width: 50%;
			font-size: 28rpx;
			//   display: flex;
			//   justify-content: flex-end;
			//   align-items: flex-end;
			//   .tip {
			//     font-size: 24rpx;
			//   }
			display: inline-block;
			font-weight: bold;
			line-height: $theme-size-large-base;
			text-align: right;
			.price {
				display: inline-block;
				vertical-align: 0;
				font-size: $theme-size-large-base;
				&::before {
					content: "￥";
					font-size: $theme-size-small-base;
					display: inline-block;
					font-weight: 400;
					vertical-align: 0;
				}
			}

			.decimal {
				display: inline-block;
				vertical-align: 0;
				font-size: $theme-size-base;
				line-height: 26rpx;
				&::before {
					content: ".";
					display: inline-block;
					vertical-align: 0;
				}
			}
		}

		.btn {
			margin-left: 14rpx;
			width: 192rpx;
			height: 72rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			border-radius: 50rpx;
		}
	}
}

.choice {
	margin: 48rpx 24rpx 0;
	&__title {
		display: flex;
		justify-content: center;
		align-items: center;
		&-text {
			font-weight: 500;
			color: $theme-color-main-base;
			margin-left: 10rpx;
			font-size: 32rpx;
		}
	}
	&__goods {
		margin-top: 64rpx;
	}
}
</style>
